<template>
	<div class="wallet">
		<div class="wallet-top">
			<p>我的钱包</p>
		</div>
		<template v-if="phone">
			<div class="wallet-bottom">
				<ul>
					<li>
						<div>
							<p><em>{{balance}}</em>元</p>
							<p><img src="../../../../public/img/user/balance.png" >
								<label>余额</label>
							</p>
						</div>
					</li>
					<li>
						<div>
							<p><em>{{coupon}}</em>张</p>
							<p><img src="../../../../public/img/user/coupon.png" >
								<label>优惠劵</label>
							</p>
						</div>
					</li>
					<li>
						<div>
							<p><em>{{Ranger_coin}}</em>个</p>
							<p><img src="../../../../public/img/user/Ranger_coin.png" >
								<label>游侠币</label>
							</p>
						</div>
					</li>
				</ul>
			</div>
		</template>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	export default{
		name:'Wallet',
		data(){
			return{
				balance:0,//余额
				coupon:7,//优惠劵
				Ranger_coin:0,//游侠币
				phone:''
			}
		},
		created() {
			this.phone=Cookies.get('phone')
		}
	}
</script>

<style scoped>
	.wallet{
		margin: 0.5rem 0 0.3rem;
		width: 100%;
		background-color: #ffffff;
		padding-bottom: 0.3rem;
	}
	.wallet-top{
		width: 100%;
		text-indent: 1em;
		padding-top: 0.2rem;
	}
	.wallet .wallet-top p{
		font-weight: bold;
		font-size: 0.37rem;
		margin: 0.1rem 0 0.3rem 0;
	}
	.wallet-bottom{
		width: 100%;
	}
	.wallet-bottom ul{
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 0 auto;
		list-style: none;
	}
	.wallet-bottom ul li{
		text-align: center;
		width: 30%;
		justify-content: center;
		line-height: 1rem;
	}
	.wallet-bottom ul li div em{
		font-weight: bold;
		font-size: 0.45rem;
		margin-right: 0.1rem;
	}
	.wallet-bottom ul li div p:last-child{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wallet-bottom ul li div img{
		width: 0.5rem;
		margin-right: 0.05rem;
	}
</style>
